<script setup lang="ts">
import PageSearch from '@/components/page-search/page-search.vue'
import PageContent from '@/components/page-content/page-content.vue'
import PageModal from '@/components/page-modal/page-modal.vue'

import { userSearchConfig } from './config/user.config'
import { contentConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'

import usePageContent from '@/hooks/usePageContent'
import { usePageModal } from '@/hooks/usePageModal'
// 点击search，content的操作
const { userDataShowRef, resetClick, searchClick } = usePageContent()

const { newUserModelRef, userNewModelShow, userEditModalShow } = usePageModal()
</script>
<template>
  <div class="user">
    <div class="main-top">
      <page-search
        @resetClick="resetClick"
        @searchClick="searchClick"
        :search-config="userSearchConfig"
      ></page-search>
    </div>
    <div class="main-content">
      <page-content
        ref="userDataShowRef"
        @userNewModelShow="userNewModelShow"
        @userEditModalShow="userEditModalShow"
        :content-config="contentConfig"
      >
        <template #enable="scope">
          <el-button
            size="small"
            plain
            :type="scope.row.enable ? 'success' : 'danger'"
          >
            {{ scope.row.enable ? '启用' : '禁用' }}
          </el-button>
        </template>
        <template #parent="scope"> {{ scope.row[scope.prop] }} </template>
      </page-content>
    </div>
    <page-modal ref="newUserModelRef" :modal-config="modalConfig"></page-modal>
  </div>
</template>

<style scoped lang="less">
.user {
  .main-top {
  }
  .main-content {
  }
}
</style>
